<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="searchMap.where.name" placeholder="请输入品牌名称" clearable @clear="search()"></el-input>
        </el-form-item>
        <el-form-item>
           <el-select v-model="searchMap.where.showStatus" clearable placeholder="请选择状态"  @clear="search()">
                <el-option
                v-for="(item, index) in brandStatusArr" :key="index"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="page=1;search()">查询</el-button>
            <el-button type="success"  icon="el-icon-circle-plus-outline"  @click="dialogFormVisible=true;title='添加品牌';entity={};imageUrl=''">添加</el-button>
            <el-button type="danger" @click="delBatch()">批量删除</el-button>
        </el-form-item>
     </el-form>
    <!-- 数据展示表格 -->
    <el-table :data="brandList" style="width: 100%" ref="brandTable">
      <el-table-column type="selection" width="55"/>
        <!--根据属性直接渲染  -->
      <el-table-column prop="name" label="品牌名称"> </el-table-column>
      <el-table-column prop="logo" label="品牌logo">
            <!-- 自定义渲染 -->
            <template slot-scope="scope">
                   <div>
                        <img style="width:80px;height:40px" :src="scope.row.logo" alt="">   
                    </div> 
            </template>   

      </el-table-column>
      <el-table-column prop="firstLetter" label="首字母"> </el-table-column>
      <el-table-column prop="showStatus" label="状态">
          
                <!--自定义渲染  -->
                <template slot-scope="scope">
                    <div>
                        <el-switch
                            v-model="scope.row.showStatus"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                          </el-switch>
                    </div>
                </template>
      </el-table-column>
       <el-table-column prop="productCount" label="产品数">
            <template slot-scope="scope">
                <div>
                    {{scope.row.productCount|nullFormart}}
                </div>
            </template>   
        </el-table-column>
      <el-table-column prop="productCommentCount" label="产品的评论数"> 
           <template slot-scope="scope">
                <div>
                    {{scope.row.productCommentCount|nullFormart}}
                </div>
            </template>   
      </el-table-column>
      
       <el-table-column  label="操作" width="200"> 
           <template slot-scope="scope">
               <div>
                   <el-button @click="updateBrand(scope.row)" type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                    <el-button @click="handleDelete(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
               </div>
           </template>
       </el-table-column>
      
      
    </el-table>
    <br/>
    <!-- 底层分页图标 -->
    <el-pagination
        style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.pageNum"
        :page-sizes="[5, 10, 25, 50]"
        :page-size="searchMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>


     <!-- 添加修改用户dialog 模态框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <el-form :rules="rules" :model="entity" ref="brandForm">
            <el-form-item label="品牌名称" label-width="100px" prop="name">
                <el-input v-model="entity.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="品牌的首字母"   label-width="100px" prop="firstLetter">
                <el-input v-model="entity.firstLetter" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="logo"   label-width="100px" prop="logo">
                <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/upload/img"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveBrand()">确 定</el-button>
        </div>
    </el-dialog>


  </div>
</template>
<script>
import axios from "axios";
//导入api
import { searchPage ,save,updateBrand,delBrand,delMore} from "@/api/brand";
export default {
  data() {
    return {
        searchMap:{
            pageNum: 1,
            pageSize: 5,
            where: {
                    // showStatus: 0,
                    name:''
                }
            },
          brandStatusArr:[{label:'禁用',value:0},{label:'启用',value:1}],
          brandList:[] ,
          total:0 ,
          dialogFormVisible:false,
          entity:{
                firstLetter: "",
                logo: "",
                name: "",
          },
          title:"",
          imageUrl:"",
          rules: {
            name: [
              { required: true, message: '请输入品牌名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            firstLetter: [
              { required: true, message: '请输入首字母', trigger: 'blur' },
            ],
            logo: [
              { required: true, message: '请输入品牌LOGO', trigger: 'change' },
            ],

    }
    };
  },
  methods: {
      //分页条件查询
      search(){
          searchPage(this.searchMap).then(res=>{
              //获取当前页数据
               this.brandList =  res.data;
               this.total = res.totalSize;
          })
      },
      handleSizeChange(size){
          this.searchMap.pageSize = size;
          this.search();
      },
      handleCurrentChange(page){
          this.searchMap.pageNum = page;
          this.search()
      },
      saveBrand(){
         //表单校验
         this.$refs.brandForm.validate((valid) => {
          if (valid) {
                if(!this.entity.id){//save  
                        save(this.entity).then(res=>{
                          this.title="添加品牌"
                          this.$notify({
                            title:res.success?'成功':'失败',
                            message:res.msg,
                            type:res.success?'success':'error',
                          })
                        this.dialogFormVisible = false;  
                        this.search();
                    })
                    }else{//update
                        updateBrand(this.entity).then(res=>{
                            this.title="修改品牌"
                            this.$notify({
                                title:res.success?'成功':'失败',
                                message:res.msg,
                                type:res.success?'success':'error',
                            })
                            this.dialogFormVisible = false;  
                            this.search();
                        })
                    }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //文件上传成功的钩子函数
      handleAvatarSuccess(response, file, fileList){
          console.log(response);
          console.log(file);
          console.log(fileList);

          this.imageUrl = response.data;

          this.entity.logo = response.data
      },
      //文件上传之前的钩子函数
      beforeAvatarUpload(file){

      },
      updateBrand(row){
          this.dialogFormVisible = true;
          this.entity = JSON.parse(JSON.stringify(row));

          this.imageUrl = row.logo;
      },
      //批量删除
      delBatch(){
          console.log("!!");
          //获取表格对象
          console.log(this.$refs.brandTable.selection);

          var ids = [];

          this.$refs.brandTable.selection.forEach(item=>{
              ids.push(item.id)
          })

          console.log(ids);

          delMore(ids).then(res=>{
                    this.$notify({
                        title:res.success?'成功':'失败',
                        message:res.msg,
                        type:res.success?'success':'error',
                    })
                    this.search();
                })
      },
      //删除
    handleDelete(row) {
      this.$confirm('确认删除此条信息？删除后不可恢复!!!')
        .then(res => {
          if (res) {
            delBrand(row.id).then(res => {
              console.log(row.id)
              this.$notify({
                title: res.success === true ? '成功' : '失败',
                message: res.msg,
                type: res.success === true ? 'success' : 'error'
              })
              // 刷新表格
              this.search()
            })
          }
        })
    },
    
  },

  created() {
      this.search();
  },
};
</script>

<style lang="css">
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
